<template>
  <div class="collection">
    <div class="label-name">我的评价</div>

    <div class="evaluate-all">
      <ul>
        <li v-for="(item, index) in evaluateList" :key="index">
          <div class="evaluate-item" @click="goGame(item.giId)">
            <div class="evaluate-img">
              <img :src="item.giLogo" alt="" />
            </div>
            <div class="evaluate-text">
              <div>{{ item.giName }}</div>
              <xing-3 :giScore="item.cscore"></xing-3>
              <div>
                {{ item.ccontent }}
              </div>
            </div>

            <div class="evaluate-time">{{ item.cstatetime }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Xing3 from "../../../components/ximg/xing3";

import { MyComments } from "../../../network/usermes";

export default {
  components: { Xing3 },
  name: "Evaluate",
  data() {
    return {
      evaluateList: [],
      uid: this.$Cookie.get("userid"),
      pages: 1,
      page: "",
    };
  },

  created() {
    this.getEvalua();
  },

  mounted() {
    window.addEventListener("scroll", this.scrollNav);
  },

  methods: {
    getEvalua() {
      MyComments(this.pages, this.uid).then((res) => {
        this.page = res.data.data.pages;
        if (this.pages > this.page) {
          console.log(this.pages);
        } else {
          this.pages += 1;
          this.evaluateList.push(...res.data.data.list);
        }
      });
    },

    scrollNav() {
      let bottom =
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight;
      if (bottom < 150 && this.pages <= this.page) {
        this.MyComments();
      }
    },

    goGame(id) {
      this.$router.push({ name: "详情", params: { id: id } });
    },
  },
};
</script>

<style>
.evaluate-all ul {
  list-style: none;
  margin-bottom: 0.8rem;
}

.evaluate-all ul li {
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgb(216, 214, 212);
}

.evaluate-item {
  display: flex;
  margin-top: 0.15rem;
  cursor: pointer;
}

.evaluate-img {
  flex: 1;
  text-align: center;
}
.evaluate-img img {
  width: 80%;
  border-radius: 15px;
}

.evaluate-text {
  flex: 8;
}

.evaluate-text div:nth-child(1) {
  font-size: 0.11rem;
  margin-bottom: 0.05rem;
}

.evaluate-text div:nth-child(2) img {
  width: 1.5%;
}

.evaluate-text div:nth-child(3) {
  font-size: 0.09rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.evaluate-time {
  flex: 1;
}
</style>